<template>
  <div class="orderDetail" ref="homePage">
    <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="订单详情" left-text="" left-arrow></van-nav-bar>
    <!-- <calendar class=""  :multiple="false"></calendar> -->
    <div class="content">
      <div class="state">
        <div>订单关闭</div>
      </div>
      <div class="product-list">
        <div class="good-item">
          <div class="orderid">
            <span>“古城寻根”苏式生活体验游</span>
            <span>x1</span>
          </div>
          <div class="product-item">
            <div class="item">
              <div class="img-box">
                <img width="100%" src="https://resource.sz-trip.com/uploads/20180612/2e28a940dd27d11d5854ecd3503ea01a.jpeg"/>
              </div>
              <div class="tet">
                <div class="txt-box">
                  <span>“古城寻根”苏式生活体验游</span>
                  <span>x1</span>
                </div>
                <p class="usetime">使用日期：2019-11-03</p>
              </div>
            </div>
            <div class="linkman">
              <van-icon style="margin-left: 0.625rem;" size="24px" name="contact" />
              <div class="txt-box">
                <p class="tip">
                  <span>联系人：李嵩岚</span>
                  <span>18681547964 | 已关闭</span>
                </p>
                <p>430426199611130000</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="price-box">
        <p class="price">
          <span>优惠</span>
          <span>- ￥0.00</span>
        </p>
        <p class="price">
          <span>实付款</span>
          <span style="color: #f75a61;">￥<span style="font-size: 1rem;">66</span></span>
        </p>
      </div>
      <div style="margin-top: 0.625rem;" class="price-box">
        <p class="price">
          <span>下单时间</span>
          <span>2019-10-12 14:44:05</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods:{
      clickleft() {
        this.$router.back(-1);
        console.log(1)
      },
    }
  }
</script>

<style lang="scss">
  .orderDetail {
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          color: #46d0ca !important;
          font-size: 1.25rem;
        }
      }
    }
    .content{
      color: #666;
      .state{
        display: flex;
        align-items: center;
        height: 6.25rem;
        background: linear-gradient(90deg,rgba(10,146,218,.3),#46d0ca);
        font-size: 1.25rem;
        justify-content: center;
        flex-direction: column;
        color: #FFFFFF;
      }
      .product-list{
        .good-item{
          border-bottom: 0.0625rem solid #eee;
          .orderid{
            line-height: 2.5rem;
            padding-left: 0.625rem;
            padding-right: 1.25rem;
            background: #FFFFFF;
            font-size: 0.8125rem;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .product-item{
             margin: 0.625rem;
             background: #FFFFFF;
             border-radius:0.25rem;
             overflow: hidden;
             box-shadow: 2px 2px 5px #969696;
             .item{
               display: flex;
               font-size: 0.8125rem;
               .img-box{
                 width: 6.25rem;
                 margin: 0.625rem;
               }
               .tet{
                 .txt-box{
                   margin-top: 0.625rem;
                   width: 14.0625rem;
                   display: flex;
                   justify-content: space-between;
                 }
                 .usetime{
                   margin-top: 0.3125rem;
                 }
               }
             }
             .linkman{
               border: none;
               background: #FFFFFF;
               display: flex;
               align-items: center;
               .txt-box{
                 font-size: 0.75rem;
                 margin: 0 0.625rem;
                 width: 100%;
                 line-height: 1.25rem;
                 .tip{
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                 }
               }
             }
          }
        }
      }
      .price-box{
        background: #FFFFFF;
        padding: 0.625rem;
        .price{
          display: flex;
          font-size: 0.75rem;
          justify-content: space-between;
        }
      }
    }
  }
</style>
